<template>
  <div class="site-url-container">
    <transition
      name="slide"
      mode="out-in"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <!-- 添加 key 确保组件正确更新 -->
      <component
        :is="currentComponent"
        v-if="currentComponent && currentProps"
        :key="currentComponentid"
        :id="currentComponentid"
        :data="currentProps"
        @remove="handleRemove"
      />
    </transition>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, h, computed, watch, markRaw } from "vue";
import CustomMenu from "./menu.vue";

const store = useStore();
const navid = computed(() => store.getters["getnavid"]);
const componentsData = computed(() => {
  return store.getters["getnavconfig"];
});

// 当前选中的组件ID
const currentComponentid = ref(null);

// 存储所有组件配置（ID + 数据）
const componentConfigs = ref({});

// 创建通用的动态组件定义（只需创建一次）
const DynamicMenu = markRaw({
  props: ["id", "data"],
  render() {
    console.log(`渲染 CustomMenu 组件 [ID: ${this.id}]`);
    return h(CustomMenu, {
      id: this.id,
      data: this.data,
    });
  },
});

console.log("动态组件定义创建完成:", DynamicMenu);

//删除某个数据
function handleRemove(payload) {
  const target = componentsData.value.find((obj) => obj.id === navid.value);
  if (!target) return;
  const newChildren = target.children.filter((item) => item.id !== payload.id);
  store.commit("ADD_CHILD_TO_NAV", {
    navId: navid.value,
    newchild: newChildren,
  });
}

// 监听导航配置变化
watch(
  componentsData,
  (newData) => {
    console.groupCollapsed("导航配置更新");
    console.log("新配置数据:", newData);

    // 更新组件配置
    newData.forEach((item) => {
      console.log(`处理菜单项 [ID: ${item.id}]`);
      const existing = componentConfigs.value[item.id];

      if (existing) {
        console.log(`菜单项 [ID: ${item.id}] 已存在，更新数据`);
      } else {
        console.log(`添加新菜单项 [ID: ${item.id}]`);
      }

      componentConfigs.value[item.id] = {
        id: item.id,
        data: item.children,
      };
    });

    console.log("更新后组件配置:", componentConfigs.value);
    console.groupEnd();
  },
  { deep: true, immediate: true }
);

// 监听导航ID变化
watch(
  navid,
  (newVal, oldVal) => {
    console.groupCollapsed("导航ID变更");
    console.log(`导航ID变化: ${oldVal} => ${newVal}`);

    currentComponentid.value = newVal;

    console.log(`当前组件ID设置为: ${newVal}`);
    console.groupEnd();
  },
  { immediate: true }
);

// 当前组件的props数据
const currentProps = computed(() => {
  const props = currentComponentid.value
    ? componentConfigs.value[currentComponentid.value]?.data
    : null;

  console.log(`计算当前组件Props [ID: ${currentComponentid.value}]:`, props);
  return props;
});

// 当前要渲染的组件（固定使用同一个组件定义）
const currentComponent = computed(() => {
  const comp = currentComponentid.value ? DynamicMenu : null;
  console.log(`计算当前组件 [ID: ${currentComponentid.value}]:`, comp);
  return comp;
});

// 过渡动画方法保持不变
const beforeEnter = (el) => {
  el.style.opacity = 0;
  el.style.transform = "translateY(100%)";
  el.style.transition = "all 0.5s ease";
};

const enter = (el) => {
  setTimeout(() => {
    el.style.opacity = 1;
    el.style.transform = "translateY(0)";
  }, 10);
};

const leave = (el) => {
  el.style.opacity = 0;
  el.style.transform = "translateY(-100%)";
};
</script>

<style scoped>
.site-url-container {
  height: 100%; /* 确保占满父容器高度 */
}
/* 样式保持不变 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
.slide-enter-to,
.slide-leave-from {
  opacity: 1;
  transform: translateY(0);
}
</style>
